<template>
	<div class="attr">
		<curr-app :left="245"></curr-app>
		<list-title :data="header" @changeVisible="changeVisible"></list-title>
		<div class="warning">
			前端开发注意：表单必须按照以下字段的顺序排列
		</div>
		<list-table :list="dynamicDataAttrList" :tableLoading="tableLoading" :appid="$route.query.appid">
			<template v-slot:data>
				<el-table-column prop="attr_name" label="名称">
					<template slot-scope="scope">
						<span>{{ scope.row.attr_name }} | {{ scope.row.attr_enname }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="attr_type" label="字段类型">
					<template slot-scope="scope">
						<span style="width: 60px">
							{{ (scope.row.attr_type == '1')?'单行文本':'' }}
							{{ (scope.row.attr_type == '2')?'多行文本':'' }}
							{{ (scope.row.attr_type == '3')?'单选框':'' }}
							{{ (scope.row.attr_type == '4')?'复选框':'' }}
							{{ (scope.row.attr_type == '5')?'下拉菜单':'' }}
							{{ (scope.row.attr_type == '7')?'图片上传':'' }}
							{{ (scope.row.attr_type == '8')?'文件上传':'' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column label="状态">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.state" @change="changeState(scope.$index, scope.row)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="是否可以为空">
					<template slot-scope="scope">
						<span :class="'el-icon-' + (scope.row.can_null?'check':'close')"></span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="100">
					<template slot-scope="scope">
						<el-button type='text' size="mini" @click="handleEdit(scope.$index, scope.row)" v-if="auth.editor">编辑</el-button>
						<el-popover
						placement="top"
						width="160"
						v-model="delTip[scope.$index+1]"  v-if="auth.delete">
							<p class="del-tip"><span class="el-icon-question"></span>确定删除吗？</p>
							<div style="text-align: right; margin: 0">
								<el-button size="mini" type="text" @click="delTip.splice(scope.$index+1, 1, false)">取消</el-button>
								<el-button type="primary" size="mini" @click="handleDelete(scope.$index, scope.row)">确定</el-button>
							</div>
							<el-button type="text" slot="reference" :disabled='submitLock[scope.$index+1]'>
								删除 <span class="el-icon-loading" v-if='submitLock[scope.$index+1]'></span>
							</el-button>
						</el-popover>
					</template>
				</el-table-column>
			</template>
		</list-table>
		<!-- 添加字段 开始 -->
		<el-dialog :title="dialogTitle" :visible.sync="header.dialogs[0].visible" :close-on-click-modal="false" width="460px">
			<el-form :model="dataForm" :rules="rules" ref="dataForm" label-width="100px">
				<el-form-item label="中文名称" prop="data.attr_name">
				<el-input v-model="dataForm.data.attr_name" placeholder="中文名称"></el-input>
				</el-form-item>
				<el-form-item label="英文名称" prop="data.attr_enname">
				<el-input v-model="dataForm.data.attr_enname" placeholder="英文名称"></el-input>
				</el-form-item>
				<el-form-item label="类型" prop="data.attr_type" style="width: 615px;">
					<el-select v-model="dataForm.data.attr_type" placeholder="请选择类型">
						<el-option label="文本" value="1"></el-option>
						<el-option label="单选框" value="3"></el-option>
						<el-option label="复选框" value="4"></el-option>
						<el-option label="下拉菜单" value="5"></el-option>
						<el-option label="图片上传" value="7"></el-option>
						<el-option label="文件上传" value="8"></el-option>
					</el-select>
					<p class="help" v-if="dataForm.data.attr_type == 7">图片格式限制jpg/png/gif</p>
					<p class="help" v-if="dataForm.data.attr_type == 8">文件格式限制zip/doc/xls/pdf/mp3/mp4</p>
				</el-form-item>
				<el-form-item label="可选值" prop="data.attr_value" 
				v-if="(dataForm.data.attr_type == '3' || dataForm.data.attr_type == '4' || dataForm.data.attr_type == '5')">
					<el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="dataForm.data.attr_value"></el-input>
					<p class="help">一行为一个值</p>
				</el-form-item>
				<el-form-item label="是否可以为空" prop="data.can_null">
					<el-switch v-model="dataForm.data.can_null"></el-switch>
				</el-form-item>
				<el-form-item label="默认值" prop="data.default_val">
					<el-input v-model="dataForm.data.default_val" placeholder="默认值"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="header.dialogs[0].visible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('dataForm')" :disabled='dataForm.submitLock'>
					确 定 <span class="el-icon-loading" v-if='dataForm.submitLock'></span>
				</el-button>
			</div>
		</el-dialog>
		<!-- 添加字段 结束 -->
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import ListTable from "pc/common/ListTable"
import {changeToBool, judgeAuth} from "static/js/common.js"
import {mapGetters} from 'vuex'
import CurrApp from "pc/common/CurrApp"

export default {
	inject: ['reload'],
	data() {
		return {
			/*appid*/
			appid: this.$route.query.appid,
			/*头部数据*/
			header: {
				title: '字段列表',
				reload: true,
				dialogs: [
					{
						title: '添加字段',
						type: 'primary',
						visible: false,
						auth: false,
					}
				],
				buttons: [
					{
						title: '自定义表单',
						type: 'primary',
						pathName: 'pc/cms/instance/dynamicData/DynamicDataList',
						auth: false,
						query: {
							appid: this.$route.query.appid,
						},
					}
				],
			},
			auth: {
				editor: false,//编辑
				delete: false,//删除
				changeState: false,//显示状态
			},
			/*列表数据*/
			dynamicDataAttrList: [
				// {
				// 	id: 1,
				// 	attr_name: '',
				// 	attr_enname: '',
				// 	attr_type: '',
				// 	state: '',
				// },
			],
			tableLoading: true,
			delTip: [],//刪除提示
			submitLock: [],
			dialogTitle: '添加字段',//dialog标题
			/*添加表单数据*/
			dataForm: {
				submitLock: false,
				data: {
					id: 0,
					dynamic_id: 0,
					attr_name: '',
					attr_enname: '',
					attr_type: '1',
					can_null: false,
					attr_value: '',
					default_val: '',
				}
			},
			rules: {
				data: {
					attr_name: [
						{ required: true, message: '请输入中文名称', trigger: 'blur' },
						{ min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
					],
					attr_enname: [
						{ required: true, message: '请输入英文名称', trigger: 'blur' },
						{ min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
					]
				}
			}
		};
	},
	components: {
		ListTitle,
		ListTable,
		CurrApp
	},
	created: function() {
		/*获取列表数据*/
		this.getDynamicDataAttrList()
		/*权限判断显示*/
		this.header.dialogs[0].auth = (judgeAuth('addDynamicDataAttr', this.allMenuList) == undefined)?false:true
		this.header.buttons[0].auth = (judgeAuth('dynamicDataList', this.allMenuList) == undefined)?false:true
		this.auth.editor = (judgeAuth('modifyDynamicDataAttr', this.allMenuList) == undefined)?false:true
		this.auth.delete = (judgeAuth('deleteDynamicDataAttr', this.allMenuList) == undefined)?false:true
		this.auth.changeState = (judgeAuth('setDynamicDataAttrState', this.allMenuList) == undefined)?false:true
	},
	watch: {
		/*监听路由变化，根据参数查询数据*/
		'$route' (to){
			this.tableLoading = true
			this.getDynamicDataAttrList()
		}
	},
	methods: {
		/*取出列表数据*/
		getDynamicDataAttrList: function(){
			if(this.$api.dynamicDataAttrList != undefined){
				this.$baseURL(this.$domain.cms)
				this.$get(this.$api.dynamicDataAttrList, this.$route.query).then(res => {
					// console.log(res);
					if(res.data.code === 0){
						if(res.data.data != undefined){
							this.dynamicDataAttrList = []
							Object.keys(res.data.data).forEach((k) => {
								this.dynamicDataAttrList.push ({
									id: res.data.data[k].attr_id,
									attr_name: res.data.data[k].attr_name,
									attr_enname: res.data.data[k].attr_enname,
									attr_type: res.data.data[k].attr_type,
									can_null: changeToBool(res.data.data[k].can_null),
									state: changeToBool(res.data.data[k].state),
								});
							})
						}
						this.tableLoading = false
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		/*编辑*/
		handleEdit(index, row) {
			// console.log(row.id);
			if(this.$api.modifyDynamicDataAttr != undefined){
				this.dataForm.submitLock = true;
				/*取出需要修改的数据*/
				this.dialogTitle = '编辑字段'
				this.header.dialogs[0].visible = true//显示修改的窗口
				this.$nextTick(() => {
					this.$refs.dataForm.resetFields()//清空表单
				})
				this.$baseURL(this.$domain.cms)
				this.$get(this.$api.modifyDynamicDataAttr, {
					appid: this.appid,
					id: row.id
				}).then(res => {
					if(res.data.code == 0){
						// console.log(res.data.data)
						this.dataForm.data.id = res.data.data.attr_id
						this.dataForm.data.dynamic_id = res.data.data.dynamic_id
						this.dataForm.data.attr_name = res.data.data.attr_name
						this.dataForm.data.attr_enname = res.data.data.attr_enname
						this.dataForm.data.attr_type = res.data.data.attr_type
						this.dataForm.data.can_null = changeToBool(res.data.data.can_null)
						this.dataForm.data.attr_value = res.data.data.attr_value
						this.dataForm.data.default_val = res.data.data.default_val
					}else{
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'error'
						});
					}
					this.dataForm.submitLock = false;
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		/*删除*/
		handleDelete(index, row) {
			if(this.$api.deleteDynamicDataAttr != undefined){
				if(!this.submitLock[index+1]){
					this.submitLock[index+1] = true//锁住当前的 删除按钮
					this.delTip.splice(index+1, 1, false)//提示消失
					/*请求后台删除*/
					this.$baseURL(this.$domain.cms)
					this.$get(this.$api.deleteDynamicDataAttr, {
						appid: this.appid,
						id: row.id
					}).then(res => {
						if(res.data.code == 0){
							this.$message({
								showClose: true,
								message: res.data.info,
								type: 'success'
							});
							this.dynamicDataAttrList.splice(index, 1);//删除当前行
						}else{
							this.$message({
								showClose: true,
								message: res.data.info,
								type: 'error'
							});
						}
						this.submitLock[index+1] = false//释放当前的 删除按钮
					})
					.catch(err => {})
					.finally(() => {}) 
				}
			}
		},
		/*dialog切换 方便子组件调用*/
		changeVisible: function(index){
			/*因为子组件调用的都是添加的行为，所以需要把id置为0(方便判断是添加还是修改)，title改为'添加字段'*/
			this.dialogTitle = '添加字段'
			this.dataForm.data.id = 0

			this.header.dialogs[index].visible = !this.header.dialogs[index].visible
			this.$nextTick(() => {
				this.$refs.dataForm.resetFields()//清空表单
			})
		},
		/*列表中直接修改 状态*/
		changeState(index, row){
			if(this.$api.setDynamicDataAttrState != undefined){
				/*请求后台*/
				this.$baseURL(this.$domain.cms)
				this.$post(this.$api.setDynamicDataAttrState, {
					appid: this.appid,
					id: row.id,
					state: row.state
				}).then(res => {
					if(res.data.code == 0){
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'success'
						});
					}else{
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'error'
						});
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		/*提交添加、修改表单*/
		submitForm(formName) {
			if(!this.dataForm.submitLock){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// console.log(this.dataForm.data)
						// return
						this.dataForm.submitLock = true;
						/*添加、修改分类*/
						let apiUrl = this.$api.addDynamicDataAttr//默认是添加
						this.dataForm.data.dynamic_id = this.$route.query.id
						if(this.dataForm.data.id > 0){//修改
							apiUrl = this.$api.modifyDynamicDataAttr
						}
						/*添加菜单*/
						if(apiUrl != undefined){
							this.$baseURL(this.$domain.cms)
							this.$post(apiUrl, {
								appid: this.appid,
								DynamicDataAttr: this.dataForm.data,
							}).then(res => {
								// console.log(res);
								/*成功*/
								if(res.data.code == 0){
									this.$message({
										showClose: true,
										message: res.data.info,
										type: 'success'
									});
									if(this.dataForm.data.id > 0){
										this.reload();
									}else{
										this.getDynamicDataAttrList()
										this.$refs[formName].resetFields();
									}
								}else{
									this.$message({
										showClose: true,
										message: res.data.info,
										type: 'error'
									});
								}
								this.dataForm.submitLock = false;
							});
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		},
	},
	computed: {
		...mapGetters([
			'allMenuList'
		])
	}
};
</script>

<style lang="stylus" scoped>
.attr
	.warning
		color: #8a6d3b
		background-color: #fcf8e3
		border: 1px solid #faebcc
		margin-top: 10px
		padding: 10px
		font-size: 12px
		line-height: 20px
</style>